<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('物理接口信息')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="70%" center @close="close">
   <div  class="physical">
    <el-table size='mini' ref="multipleTable" :data="addr_group_list">
      <el-table-column align='center' prop="strPhysicsName" :label="$t('接口名称')" width="80">
      </el-table-column>
      <el-table-column align='center' prop="cDevOtherName" :label="$t('别名')" width="80">
        <template slot-scope="scope">
          <tooltip :html="scope.row.cDevOtherName" :content="scope.row.cDevOtherName" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="enPortMode" :label="$t('模式')" width="100" :formatter="handel_enPortMode">
      </el-table-column>
      <el-table-column align='center' prop="ePortOrlPort" :label="$t('网口类型')" width="100">
        <template slot-scope="scope">
          {{ ePortOrlPortList[scope.row.ePortOrlPort] || scope.row.ePortOrlPort }}
        </template>
      </el-table-column>
      <el-table-column align='center' prop="ipv4" :label="$t('IPv4/子网掩码')" min-width="180" :formatter="handel_ipv4_array">
        <template slot-scope="scope">
          <tooltip :html="classMapShow(scope.row, ';<br/>')" :content="classMapShow(scope.row, ',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="ipv6" :label="$t('IPv6/前缀')" min-width="180" :formatter="handel_ipv6_array">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIpv6(scope.row, ';<br/>')" :content="classMapShowIpv6(scope.row, ',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="bLinkStatus" :label="$t('链路状态')" width="90" :formatter="bLinkStatus">
      </el-table-column>
      <el-table-column align='center' prop="bPortStatus" :label="$t('状态')" width="80" :formatter="bPortStatus">
      </el-table-column>
      <el-table-column align='center' prop="iMtu" :label="$t('Mtu值')" width="80">
      </el-table-column>
      <el-table-column align='center' prop="bandwidth" :label="$t('速率')" width="80">
      </el-table-column>
      <el-table-column align='center' prop="sys" fixed="right" :label="$t('操作')" width="90">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="get_physical_info(scope.row)">
            {{$t('查看')}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
    <PhysicalShow ref="show_box" v-bind:type_info="'查看'" v-bind:edit_form="info" />
  </el-dialog>
</template>

<script>
import PhysicalShow from './PhysicalShow.vue'
import { getPhysicalApiArray, getPhysicalApiInfo } from '@/api/network/api/physical'
export default {
  name: 'Physical',
  components: {
    PhysicalShow
  },
  data () {
    return {
      dialogVisible: false,
      addr_group_list: [],
      info: {},
      ePortOrlPortList: {
        'ePort': this.$t('电口'),
        'lPort': this.$t('光口')
      }
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
      getPhysicalApiArray().then(response => {
        if (response.status === 0) {
          this.addr_group_list = response.info
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.$parent.virtualDialogVisible = false
      this.addr_group_list = []
      this.info = {}
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_ipv4_array (row) {
      if (row.ipv4) {
        let test = ''
        row.ipv4.forEach((item, index, array) => {
          if (item.cPortIpv4 !== '') {
            test += item.cPortIpv4 + '/'
          }
          if (item.cPortNetmask !== '') {
            test += item.cPortNetmask
          }
        })
        return test
      }
    },
    handel_ipv6_array (row) {
      if (row.ipv4) {
        let test = ''
        row.ipv6.forEach((item, index, array) => {
          if (item.cPortIpv6 !== '') {
            test += item.cPortIpv6 + '/'
          }
          if (item.cDevIpv6Prefix !== '') {
            test += item.cDevIpv6Prefix
          }
        })
        return test
      }
    },
    bPortStatus (row) {
      switch (row.bPortStatus) {
        case 'up':
          return this.$t('开启')
        case 'down':
          return this.$t('关闭')
      }
    },
    handel_enPortMode (row) {
      switch (Number(row.enPortMode)) {
        case 0:
          return this.$t('路由模式')
        case 1:
          return this.$t('透明模式')
        case 2:
          return this.$t('聚合模式')
        case 3:
          return this.$t('虚拟线模式')
      }
    },
    bLinkStatus (row) {
      switch (Number(row.bLinkStatus)) {
        case 0:
          return 'down'
        case 1:
          return 'up'
      }
    },

    get_physical_info (row) {
      let formData = {}
      formData.name = row.strPhysicsName
      getPhysicalApiInfo(formData).then((response) => {
        if (response.status === 0) {
          this.tableData = []
          this.info = response.info[0]
          if (typeof this.info.iAllowed === 'object') {
            let text = ''
            // 修改Trunk VlanId的值用，从1，2，3格式改成1-3
            let newNum = 0 // 如果有连续数字则等于连续数的开始
            let oldNum = 0 // 连续数的末尾
            let flag = false // 进入连续数的标识
            this.info.iAllowed.forEach((item, index) => {
              if (index === 0) { // 初始值
                newNum = item.AllowedVlanId
                text += item.AllowedVlanId
              } else {
                if (flag) {
                  // 进入连续数
                  if (item.AllowedVlanId === (oldNum + 1)) {
                    oldNum = item.AllowedVlanId
                  } else {
                    text += oldNum
                    text += ',' + item.AllowedVlanId
                    newNum = item.AllowedVlanId
                    oldNum = 0
                    flag = false
                  }
                } else {
                  // 未进入连续数
                  if (item.AllowedVlanId === (newNum + 1)) {
                    flag = true
                    oldNum = item.AllowedVlanId
                    text += '-'
                  } else {
                    newNum = item.AllowedVlanId
                    text += ',' + item.AllowedVlanId
                  }
                }
              }
            })
            if (flag) {
              text += oldNum
            }
            this.info.iAllowedStr = text
          }
          this.$refs.show_box.init()
        }
      })
    },
    classMapShow (data, str) {
      let reStr = ''
      if (data.ipv4) {
        data.ipv4.forEach((val, index) => {
          if (index < 1 && str === ',' && val.cPortIpv4) {
            reStr += val.cPortIpv4 + '/' + val.cPortNetmask
          } else if (str === ',' && val.cPortIpv4) {
            reStr += str + val.cPortIpv4 + '/' + val.cPortNetmask
          } else if (val.cPortIpv4) {
            reStr += val.cPortIpv4 + '/' + val.cPortNetmask + str
          }
        })
      }
      return reStr
    },
    classMapShowIpv6 (data, str) {
      let reStr = ''
      if (data.ipv6) {
        data.ipv6.forEach((val, index) => {
          if (index < 1 && str === ',' && val.cPortIpv6) {
            reStr += val.cPortIpv6 + '/' + val.cDevIpv6Prefix
          } else if (str === ',' && val.cPortIpv6) {
            reStr += str + val.cPortIpv6 + '/' + val.cDevIpv6Prefix
          } else if (val.cPortIpv6) {
            reStr += val.cPortIpv6 + '/' + val.cDevIpv6Prefix + str
          }
        })
      }
      return reStr
    }
  }
}
</script>
<style scoped lang="less">
  .physical {
      max-height: 650px;
      overflow-y: auto; 
  }
</style>